import React, { useEffect, useState } from "react";
import '../../appcommon.css';
import styles from './invitedetail.module.css';
import { useDispatch } from "react-redux";
import { DotLoading, Mask } from "antd-mobile";
import { saveEvent } from "@/store/actions/saveEvent";
import { useHistory } from "react-router-dom/cjs/react-router-dom.min";


import NavigateBar from "@/components/NavigateBar";
import { LangEn } from "@/utils/langEn";

/**
 * 登录页
 */
export default function TodayEarnRules() {

    //loading状态
    const [maskVisible, setMaskVisible] = useState(false)

    //显示add home弹框
    const [addHomeMaskVisible, setAddHomeMaskVisible] = useState(false);
    const [addHomeMaskIsHomeMode, setAddHomeMaskIsHomeMode] = useState(true);

    // 当前 列表
    const [curList, setCurList] = useState([]);

    // 文案翻译
    const [curLang, setCurLang] = useState(LangEn);

    // 获取 Redux 分发器
    const dispatch = useDispatch()

    //router
    const history = useHistory()

    //清空登录信息
    useEffect(() => {
        //关闭loading
        setMaskVisible(false);

        setCurList([
            '1. When using the cmc wallet, the platform calculates your rewards based on your daily deposit records, using the cumulative highest amount of digital currency deposited in the wallet in a single day.',
            '2. Rewards are calculated based solely on the total highest amount of digital currency (converted to USDT) historically deposited in the wallet on a given day. Transfers of digital assets out of the wallet do not affect the reward calculation.',
            '3. Digital assets held in the cmc wallet after midnight will be considered as a new deposit on the following day and will be included in the reward calculation. ',
            '4. Transfers of assets between cmc wallet accounts will not be considered for reward earnings.',
            '5. Daily earnings will be converted into withdrawable rewards after being calculated on the following day. You can withdraw these rewards to your own wallet. ',
            '6. We provide a limited number of withdrawal opportunities for each user. Once you\'ve exhausted your available withdrawal opportunities, you will no longer be able to withdraw rewards.',
            '7. If the total assets deposited into the wallet in a single day exceed 10,000 USDT, an additional withdrawal opportunity will be automatically granted.',
            '8. Currently, only USDT stablecoins are supported for generating rewards.',
            '9. The platform does not tolerate fraudulent activities such as falsifying transfer records to deceive for rewards. The right to interpret these rules belongs to this platform.'
        ])

        //打点
        doHitEvent("INVITE_EARN_RULES_START")

        return () => {
            //打点
            doHitEvent("INVITE_EARN_RULES_END")
        }
    }, [])

    //打点接口
    const doHitEvent = async (type, remark = "") => {
        console.log("doHitEvent: " + type + " , " + remark);

        try {
            //获取Action
            const action = saveEvent(type, remark)

            //触发接口
            await dispatch(action)

        } catch (e) {
            console.log(e)
        }
    }

    return (
        <div className='pageRoot pageBackgroundColorGray'>
            <NavigateBar theme="white" showLogout={false} onAddFavorite={() => { setAddHomeMaskIsHomeMode(false); setAddHomeMaskVisible(true) }} onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }}>Transfer earn rule</NavigateBar>

            {/* 使用添加 home screen bar */}
            {/* <AddFavorite onAddHome={() => { setAddHomeMaskIsHomeMode(true); setAddHomeMaskVisible(true) }} /> */}

            <div className="pageContentColumnFull">
                {/* 菜单 列表 */}
                <div className="pageContentColumnFull">
                    <div className={styles.inviteDetailList}>
                        {curList && curList.map((value, index) => {
                            return (
                                <div className={styles.inviteDetailListItemRule} key={index}>
                                    <div className={styles.inviteDetailListItemTitleRule}>{value}</div>
                                </div>
                            )
                        })}
                    </div>
                </div>
            </div>

            {/* 底部 margin */}
            <div className="pageBottomEdge"></div>

            {/* load mask */}
            <Mask visible={maskVisible} opacity={0.1}
                onMaskClick={() => { }}>
                <div className="pageLoadingOverlayContent">
                    <span style={{ fontSize: 24, color: '#3498DB' }} >
                        <DotLoading color="currentColor" />
                    </span>
                </div>
            </Mask>
        </div >
    )
}